<template>
	<div>
		<div class="search">
			<input type="text" v-model="keyWord" placeholder="输入城市名或拼音" class="search_input">
		</div>
		<div class="search-content" ref="scroll" v-show="keyWord">
			<ul>
				<li  class="border-bottom" v-for="(item,index) in list" :key="index" @click="handleClick" >{{item}}</li>
				<li v-show="flag" class="border-bottom">没有找到匹配数据</li>
			</ul>
		</div>
	</div>
	
</template>	
<script>
	import BScroll from 'better-scroll'
	import { mapState,mapMutations } from 'vuex'
	export default{
		data(){
			return{
				keyWord:'',
				list:[],
				timer:null,
			}
		},
		computed:{
			...mapState(['cityname']),
			flag(){
				return !this.list.length
			}
		},
		props:{
			citys:Object
		},
		mounted(){
			this.scroll = new BScroll(this.$refs.scroll)
		},
		updated(){
			this.scroll = new BScroll(this.$refs.scroll)
		},
		watch:{
			keyWord(){
				if(this.timer){
					clearTimeout(this.timer)
				}
				if(!this.keyWord){
					this.list=[]
					return
				}
				this.timer=setTimeout(()=>{
					const result=[]
					for(let i in this.citys){
						this.citys[i].forEach(item=>{
							if(item.name.indexOf(this.keyWord)>-1 || item.spell.indexOf(this.keyWord)>-1){
								result.push(item.name)
							}
						})
					}
					this.list=result;
				},100)
			}
		},
		methods:{
			...mapMutations(['changeCityname']),
			handleClick(e){
				this.changeCityname(e.target.innerText);
				this.$router.push('/')
				
			}
		}
	}
</script>
<style scoped lang="stylus">	
	@import '~style/varibles.styl';
	.search-content
		position	absolute
		left	0
		right	0
		bottom	0
		top	1.76rem
		background	#eee
		z-index	10
		overflow	hidden
		ul
			li
				padding	0 0.2rem
				font-size	0.28rem
				color	#666
				line-height	0.6rem
				background	#fff
	.search
		background $bgColor
		padding-bottom	0.2rem
		.search_input
			width	7.2rem
			background	#fff
			height	0.7rem
			line-height	0.5rem
			padding	0 10px
			box-sizing	border-box
			display	block
			margin	0 auto
			border-radius	5px
			color	#666
			font-size	0.28rem
			line-height	0.7rem
			text-align	center
</style>